<template>
	<view class="navbar">
		<view :class="[current===index?'active':'','nav-item']" v-for="(item,index) in data" :key="item.id"
			@tap="handlechange(index)">
			{{item.nav}}
		</view>
	</view>

</template>

<script>
	export default {
		name: "navbar",
		props: {
			data: Array,
			currentIndex: Number
		},
		data() {
			return {

				current: 0, //当前选中tab菜单下表 index

			};
		},

		watch: {
			currentIndex(newValue, oldValue) {
				this.handlechange(newValue)
			}
		},
		methods: {
			handlechange(index) {
				if (this.current != index) {
					this.current = index
					this.$emit('change', {
						index,
						value: this.data[index]
					})
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		width: 100vw;
		position: sticky;
		top: 44px;
		z-index: 9999;
		left: 0;
		background-color: #f2f2f2;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.nav-item {
			flex: 1;
			padding: 10rpx 30rpx;
			text-align: center;
			font-size: 28rpx;

		}

		.active {
			position: relative;
			color: #ff6900;

			&::after {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				content: '';
				height: 0;
				width: 50%;
				border-bottom: 6rpx solid #ff6900;
				border-radius: 6rpx;
			}

		}
	}
</style>
